<template>
  <div class="w" ref="box">
    <div class="left">
      <div v-for="i in interview_index">
        <h1 class="h1">{{ i }}</h1>

        <!--question_ID是输入题号 通过ID查找数据库将返回的信息装入 questions[i-1]中 前端没写该部分内容 需要完成 machine_question_display(i) 函数-->
        <div class="question_machine_data" v-if="man_machine_flags[i-1] && !question_detail_flags[i-1]">
          <div class="info">输入题目id:</div>
          <div class="machine_data_search">
            <input type="text" class="number_message" v-model="question_ID[i-1]"></input>
            <button class="machine_data_define" @click="question_detail_change(i)"></button>
          </div>
          <span class="question_style_change" @click="question_style_change(i)">手动输入题目</span>
        </div>

        <!--通过手动输入题目 得到questions[i-1] 前端已实现该部分内容-->
        <div class="question_data"
             v-if="!man_machine_flags[i-1] && !question_detail_flags[i-1]                                                                                                                 ">
          <div class="info">题目标题:</div>
          <input type="input" class="text_message" placeholder="题目标题" v-model="question_title[i-1]"></input>
          <div class="info">题目内容：</div>
          <div class="markdown">
            <textarea v-model="question_content[i-1]" rows="8" class="markdown_content"  placeholder="题目详细内容..."></textarea>
            <markdown-it-vue class="md-body"
                             :content="question_content[i-1]"
                             :options="options"
            />
          </div>
          <div class="info">输入格式：</div>
          <textarea rows="4" class="textarea_message" placeholder="输入格式..." v-model="question_format[i-1]"></textarea>

          <div class="info">输入：</div>
          <table
            :class="input_table"
            @mouseover="input_table_mouse_over"
            @mouseleave="input_table_mouse_leave(i)"
            @dblclick="icon_change"
          >
            <tr>
              <td class="table_head first">
                <span class="title1">变量名</span><br>
                <span class="title2">赋值</span><br>
                <span class="title3">第i组数据</span>
              </td>
              <td v-for="k in input_variables[i-1]">
                <input type="text" class="td_message" v-model="question_variable[i-1][k-1]"></input>
              </td>
              <td style="width: 32px" :rowspan="input_data_sets[i-1] + 1">
                <i
                  v-if="((input_variables[i-1] < 4 && rl_plus_sub_flags) || (!rl_plus_sub_flags && input_variables[i-1] > 1)) && input_label_visible"
                  @click="input_line_plus(i)"
                  :class="line_icon"></i>
              </td>
            </tr>
            <tr v-for="j in input_data_sets[i-1]">
              <td class="table_head">{{ j }}</td>
              <td v-for="n in input_variables[i-1]">
                <input type="text" class="td_message" v-model="question_set_data[i-1][j-1][n-1]"></input>
              </td>
            </tr>
            <tr>
              <td style="padding: 5px" :colspan="input_variables[i-1] + 1">
                <i
                  v-if="(rl_plus_sub_flags || (!rl_plus_sub_flags && input_data_sets[i-1] > 1)) && input_label_visible"
                  @click="input_row_plus(i)"
                  :class="row_icon"></i>
              </td>
            </tr>
          </table>
          <div class="info">输出：</div>
          <div class="text_message_half_div">
            <input type="text" class="text_message_half" v-for="j in output_data_sets[i-1]"
                   v-model="question_output_data[i-1][j-1]"></input>
            <i class="icon-plus green" @click="output_plus(i)"></i>
            <i class="icon-minus red" @click="output_minus(i)" v-if="output_data_sets[i-1]>1"></i>
          </div>
          <div class="info">备注：</div>
          <input type="input" class="text_message" placeholder="备注" v-model="question_remark[i-1]"></input>
          <div class="man_data_define" @click="question_detail_change(i)">确定</div>
          <span class="question_style_change" @click="question_style_change(i)">id查找题目</span>
        </div>

        <!--得到的 questions 的内容 最终会以该div显示出来-->
        <div class="problem_detail" v-if="question_detail_flags[i-1]">
          <h3>题目标题  {{ questions[i - 1].title }}</h3>
          <h3>题目描述</h3>
          <markdown-it-vue class="md-body-show"
                           :content="questions[i - 1].content"
                           :options="options"
          />
          <br>
          <h3>输入格式</h3>
          <div class="post_content" style="margin-left: 2em">
            <pre>{{ questions[i - 1].input_format }}</pre>
          </div>
          <br>
          <h3>样例数据</h3>
          <p class="post_content">输入</p>
          <ul class="input_output">
            <li v-for="k in questions[i-1].input_data.length">{{ questions[i - 1].input_data[k - 1] }}</li>
          </ul>
          <p class="post_content">输出</p>
          <ul class="input_output">
            <li v-for="j in questions[i-1].output_data.length">{{ questions[i - 1].output_data[j - 1] }}</li>
          </ul>
          <br>
          <h3>备注</h3>
          <p class="post_content">{{ questions[i - 1].remark }}</p>
          <div class="question_modification" @click="question_detail_change(i)" v-if="!question_confirm">修改</div>
        </div>

      </div>
      <div style="overflow: auto">
        <i class="icon-plus interview_plus_minus" @click="interview_plus()" v-if="!mail_send_flag"></i>
        <i class="icon-minus interview_plus_minus" @click="interview_minus()"
           v-if="interview_index>1 && !mail_send_flag"></i>
      </div>

    </div>

    <div class="right">
      <div class="invitation_code" @click="confirm" :style="confirm_style()" :title="confirm_title" v-show="!finish_question">
        {{ confirm_content }}
      </div>
      <div class="invitation_code" @click="jump_interview" :style="confirm_style()" :title="confirm_title" v-show="finish_question">
        进入面试
      </div>
      <div v-show="complete" class="post_content">
        <div class="invitation_code" style="cursor: text; user-select: text">
          {{ RID }}
        </div>
      </div>
      <div class="mail_send" v-if="mail_send_flag">
        <input type="text" class="mail_content" placeholder="面试者邮箱账号" v-model="mail"></input>
        <button class="mail_send_confirm" @click=" invitation_code_get()">发送面试邀请</button>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import axios from "axios";
import qs from "qs";
import { mapGetters } from "vuex";
import MarkdownItVue from "markdown-it-vue";

export default {
  components: {
    MarkdownItVue
  },
  name: "Interview",
  data() {
    return {
      html:"",
      options: {
        markdownIt: {
          linkify: true
        }
      },

      man_machine_flags: [true],
      question_detail_flags: [false],
      output_table: "output_input_table table_padding",
      input_table: "output_input_table table_padding",
      interview_index: 1,
      invitation_code_content: "发送邀请码",
      input_variables: [1],
      input_label_visible: false,
      input_data_sets: [1],
      output_data_sets: [1],
      row_icon: "icon-plus row_plus_sub",
      line_icon: "icon-plus line_plus_sub",
      rl_plus_sub_flags: true,

      question_ID: [""],
      question_title: [""],
      question_format: [""],
      question_content: [""],
      question_variable: [[""]],
      question_set_data: [[[""]]],
      question_output_data: [[""]],
      question_remark: [""],
      //最终数据格式为 questions 每添加一道题目 questions长度+1 每一道题都有如下五种信息
      // title 字符串
      // input_format 字符串
      // input_data 数组 一组样例输入为一个字符串 形如 ['input_data = [1, 2, 3]', 'input_data = [2, 3, 4]']为两组输入样例
      // output_data 同上 一组样例输入为一个字符串
      // remark 字符串
      // content 题目描述
      questions: [{
        id: "",
        title: "",
        input_format: "",
        input_data: [],
        output_data: [""],
        remark: "",
        content: ""
      }],

      mail: "",
      question_confirm: false,
      confirm_content: "完成命题",
      confirm_title: "您尚未完成试题编写",
      mail_send_flag: false,//是否能发送邮件
      complete: false,//完成前置步骤，可以进入面试
      QIDs: [],
      RID: "",
      finish_question:false,
    };
  },
  computed: {
    ...mapGetters(["isLogin"]),
    ...mapGetters(["currentUser"]),
    ...mapGetters(["email"]),
    ...mapGetters(["userImage"])
  },
  methods: {
    add_new_question:async function(i) {
      await axios({
        method: "post",
        url: "/question/new_question",
        data:
          qs.stringify(
            {
              title: this.questions[i].title,
              time: Date(),
              difficulty: "Middle",
              content: this.questions[i].content,
              remark: this.questions[i].remark,
              inputFormat: this.questions[i].input_format,
              inputExample: this.questions[i].input_data.toString(),
              outputExample: this.questions[i].output_data.toString()
            })
      })
        .then(res => {
          //获取数据
          if (res.data.errcode === 0) {
            if(res.data.result)
            console.log(res.data);
            //alert("complte");
            console.log(this.questions);
            console.log(i);
            this.questions[i].id = res.data.QID;
            console.log(this.questions);
            this.QIDs.push(res.data.QID);

          } else if (res.data.errcode === -1) {
            this.$message.error("数据库连接失败");
          } else {
            this.$message.error("数据库连接失败");
          }

        })
        .catch(function(error) {
          console.log(error);
        });


  },
    check_new_problem:async function() {
    let len = this.questions.length;
    let i = 0;
    this.QIDs = [];
    for (; i < len; i++) {
      console.log(i);
      console.log(this.questions[i].id);
      if (this.questions[i].id.length !== 0) {
        this.QIDs.push(this.questions[i].id);
        console.log("dasdiaosdadasda");
        continue;
      } else {
        await this.add_new_question(i);
      }
    }
  }
  ,
    invitation_code_get:async function() {

      if (this.mail === "") {
        this.$message.error("面试者邮箱不能为空");
        return 0;
      } else {
        await axios({
          method: "post",
          url: "/check",
          data:
            qs.stringify(
              {
                email: this.mail
              })
        })
          .then(async res => {
            //获取数据
            if (res.data.result === false) {
              this.$message.error("找不到该名面试者");
            } else {
              this.$message.success("与该名面试者取得连接");
              /*              this.$message.success(this.email);
                            this.$message.success(this.mail);*/
              await this.check_new_problem();
              await this.new_room();
              console.log(this.QIDs.toString());
              this.mail_send_flag = false;
              this.confirm_content = "提交试卷";
              this.complete = true;
            }
          })
          .catch(function(error) {
            this.$message.error(error);
          });
      }

      // 首先获取到 mail 即为面试者账号 之后发送吧
      // 发送成功之后 将 mail_send_flag置为false 将confirm_content置为 提交试卷

      return 0;
    }
  ,
    new_room:async function(){

      await axios({
        method: "post",
        url: "/room/new_room",
        data:
          qs.stringify(
            {
              interviewer: this.email,
              interviewee: this.mail,
              QIDs: this.QIDs
            },
            { indices: false }
          )

      })
        .then(res => {
          //获取数据
          if (res.data.errcode === 0) {
            this.RID = res.data.RID;
          } else if (res.data.errcode === -1) {
            this.$message.error("数据库连接失败");
          } else if (res.data.errcode === -2) {
            this.$message.error("数据库操作失败");

          } else if (res.data.errcode === -3) {
            this.$message.error("未指定面试者/面试官");

          } else if (res.data.errcode === -4) {
            this.$message.error("与该面试者的房间已存在");

          } else if (res.data.errcode === -6) {
            this.$message.error("未设置题目");

          }


        })
        .catch(function(error) {
          this.$message.error(error);
        });

    },
    interview_plus:function() {
      this.interview_index += 1;
      this.input_data_sets.push(1);
      this.output_data_sets.push(1);
      this.input_variables.push(1);
      this.man_machine_flags.push(true);
      this.question_ID.push("");
      this.question_detail_flags.push(false);
      this.question_variable.push([""]);
      this.question_set_data.push([[""]]);
      this.question_title.push("");
      this.question_format.push("");
      this.question_content.push("");
      this.question_output_data.push([""]);
      this.question_remark.push("");
      this.questions.push({
        title: "",
        input_format: "",
        input_data: [],
        output_data: [""],
        remark: "",
        content: ""
      });
    }
  ,

    interview_minus:function() {
      this.interview_index -= 1;
      this.input_data_sets.pop();
      this.output_data_sets.pop();
      this.input_variables.pop();
      this.man_machine_flags.pop();
      this.question_ID.pop();
      this.question_detail_flags.pop();
      this.question_variable.pop();
      this.question_set_data.pop();
      this.question_title.pop();
      this.question_content.pop();
      this.question_format.pop();
      this.question_output_data.pop();
      this.question_remark.pop();
      this.questions.pop();
    }
  ,

    input_table_mouse_over:function() {
      this.input_label_visible = true;
      this.input_table = "output_input_table";
    }
  ,

    input_table_mouse_leave:function(i) {
      this.input_label_visible = false;
      if (this.rl_plus_sub_flags || !this.rl_plus_sub_flags && this.input_data_sets[i - 1] > 1) {
        this.input_table = "output_input_table table_padding";
      } else {
        this.input_table = "output_input_table";
      }
    }
  ,

    input_line_plus:function(i) {
      if (this.rl_plus_sub_flags) {
        this.$set(this.input_variables, i - 1, this.input_variables[i - 1] + 1);
        this.question_variable[i - 1].push("");
        for (let k = 0; k < this.input_data_sets[i - 1]; k++) {
          this.question_set_data[i - 1][k].push("");
        }
      } else {
        this.$set(this.input_variables, i - 1, this.input_variables[i - 1] - 1);
        this.question_variable[i - 1].pop();
        for (let k = 0; k < this.input_data_sets[i - 1]; k++) {
          this.question_set_data[i - 1][k].pop();
        }
      }
    }
  ,

    input_row_plus:function(i) {
      if (this.rl_plus_sub_flags) {
        this.$set(this.input_data_sets, i - 1, this.input_data_sets[i - 1] + 1);
        this.question_set_data[i - 1].push([]);
        for (let k = 0; k < this.input_variables[i - 1]; k++) {
          this.question_set_data[i - 1][this.input_data_sets[i - 1] - 1].push("");
        }
      } else {
        this.$set(this.input_data_sets, i - 1, this.input_data_sets[i - 1] - 1);
        this.question_set_data[i - 1].pop();
      }
    }
  ,

    output_plus:function(i) {
      this.$set(this.output_data_sets, i - 1, this.output_data_sets[i - 1] + 1);
      this.question_output_data[i - 1].push("");
    }
  ,

    output_minus:function(i) {
      this.$set(this.output_data_sets, i - 1, this.output_data_sets[i - 1] - 1);
      this.question_output_data[i - 1].pop();
    }
  ,

    icon_change:function() {
      if (this.rl_plus_sub_flags) {
        this.row_icon = "icon-minus row_plus_sub";
        this.line_icon = "icon-minus line_plus_sub";
        this.rl_plus_sub_flags = false;
      } else {
        this.row_icon = "icon-plus row_plus_sub";
        this.line_icon = "icon-plus line_plus_sub";
        this.rl_plus_sub_flags = true;
      }
    }
  ,

    question_style_change:function(i) {
      if (this.man_machine_flags[i - 1]) {
        this.$set(this.man_machine_flags, i - 1, false);
      } else {
        this.$set(this.man_machine_flags, i - 1, true);
      }
    }
  ,

    question_detail_change:function(i) {
      if (!this.question_detail_flags[i - 1]) {
        if (this.man_machine_flags[i - 1]) {
          console.log(this.machine_question_display(i));
          if ( this. machine_question_display(i)==1) {
            return 0;
          }
        } else {
          this.man_question_display(i);
        }
        this.$set(this.question_detail_flags, i - 1, true);
      } else {
        this.$set(this.question_detail_flags, i - 1, false);
      }
    }
  ,

     machine_question_display: function(i) {

       let id = this.question_ID[i - 1];
       console.log(id);
        axios({
         method: "post",
         url: "/question/get_question_detail?id=" + id
       })
         .then(res => {
           //获取数据
           if (res.data.err === 0) {
             if (res.data.result.length > 0) {
               console.log(res.data);
               this.questions[i - 1].title = res.data.title;
               this.questions[i - 1].input_format = res.data.inputFormat;
               this.questions[i - 1].input_data = [res.data.inputExample];
               this.questions[i - 1].output_data = [res.data.outputExample];
               this.questions[i - 1].remark = res.data.remark;
               this.questions[i - 1].title = res.data.title;
               this.questions[i - 1].content = res.data.content;
               this.questions[i - 1].id = res.data.QID;
               this.inputExample = [res.data.inputExample];
               console.log(res.data);
               return 0;
             } else {
               this.$message.error("找不到题目");
               console.log("0213213");
               return 1;
             }

           } else if (res.data.err === -1) {
             this.$message.error("未知错误");
             return 1;
           } else if (res.data.err === 2) {
             this.$message.error("找不到题目");
             return 1;
           } else {
             this.$message.error("找不到题目");
             return 1;
           }
           /*
                   this.$message({
                     message:res.data,
                     type: 'success'
                   });*/
         })
         .catch(function(error) {
           this.$message.error(error);
         });
       return 1;
       //首先获取到 question_ID[i-1] (此处获取到的为string型) 检索数据库 将id相等的数据拿出来放入 questions[i-1]中 格式在data中已标明
     }
  ,

    man_question_display:function(i) {
      for (let k = 0; k < i; k++) {
        this.questions[i - 1] = {
          title: "",
          input_format: "",
          input_data: [],
          output_data: [""],
          remark: ""
        };
      }
      for (let j = 0; j < this.input_data_sets[i - 1]; j++) {
        this.questions[i - 1].input_data.push("");
        for (let k = 0; k < this.input_variables[i - 1]; k++) {
          if (this.question_variable[i - 1][k] != "") {
            this.$set(this.questions[i - 1].input_data, j, this.questions[i - 1].input_data[j] + this.question_variable[i - 1][k] + " = " + this.question_set_data[i - 1][j][k] + " ");
          } else {
            this.$set(this.questions[i - 1].input_data, j, this.questions[i - 1].input_data[j] + this.question_set_data[i - 1][j][k] + " ");
          }
        }
      }

      for (let k = 0; k < this.output_data_sets[i - 1]; k++) {
        this.$set(this.questions[i - 1].output_data, k, this.question_output_data[i - 1][k] + " ");
      }

      this.$set(this.questions[i - 1], "title", this.question_title[i - 1]);
      this.$set(this.questions[i - 1], "content", this.question_content[i - 1]);
      this.$set(this.questions[i - 1], "input_format", this.question_format[i - 1]);
      this.$set(this.questions[i - 1], "remark", this.question_remark[i - 1]);
      this.$set(this.questions[i - 1], "id", this.question_ID[i - 1]);
    }
  ,

    confirm_style:function() {
      for (let i = 0; i < this.question_detail_flags.length; i++) {
        if (!this.question_detail_flags[i]) {
          this.confirm_title = "您尚未完成试题编写";
          return {
            backgroundColor: "rgba(196,196,196,1)",
            cursor: "default"
          };
        }
      }
      this.confirm_title = "";
      return {
        cursor: "pointer",
        backgroundColor: "rgba(46,181,61,1)"
      };
    }
  ,

    confirm:function() {

      for (let i = 0; i < this.question_detail_flags.length; i++) {
        if (!this.question_detail_flags[i]) {
          return 0;
        }
      }
      if (this.complete) {

        var input = document.createElement("input");   // js创建一个input输入框
        input.value = this.RID;  // 将需要复制的文本赋值到创建的input输入框中，this.ruleForm.url这个是我要复制的内容
        document.body.appendChild(input);    // 将输入框暂时创建到实例里面
        input.select();   // 选中输入框中的内容
        document.execCommand("Copy");   // 执行复制操作
        alert("题目完成，请邀请面试人进入面试");
        this.finish_question=true;
      } else if (!this.question_confirm) {
        this.question_confirm = true;
        this.confirm_content = "继续命题";
        this.mail_send_flag = true;
      } else {
        this.question_confirm = false;
        this.confirm_content = "完成命题";
        this.mail_send_flag = false;

      }
    },
    jump_interview(){

      this.$router.push({path:'/interviewer_room',query: {RID:this.RID}})
    }
  }
};
</script>

<style scoped>
@import "../../common/stylus/style.css";
@import "../../assets/css/all.css";
@import "../../assets/css/interview.css";
</style>